<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <#assign base=request.contextPath/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>XXX登陆</title>
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/login/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/login/demo.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/cloud.css"/>
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css">
    <link href="${base}/backstage/assets/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="${base}/backstage/xu/css/styles.css">

    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/login/component.css"/>
    <script src="${base}/backstage/js/html5.js"></script>
    <script src="${base}/backstage/js/jquery.min.js"></script>
    <script src="${base}/backstage/js/jquery.blockUI.js"></script>
    <script src="${base}/backstage/js/cloud.js"></script>
    <script type="text/javascript" src="${base}/backstage/layui/layui.js"></script>
    <#--    <script type="text/javascript" src="${base}/backstage/assets/js/jquery-1.8.3.min.js"></script>-->
</head>
<body onLoad="sendRequest()" >

<div class="videozz"></div>
<video  autoplay muted loop poster="${base}/backstage/assets/images/fallba1ck.jpg">
    <source src="${base}/backstage/assets/images/mov.mp4">
    你的游览器不支持video支持
</video>

<div class="box">
    <div class="box-a">

        <div class='login' style="position: fixed;bottom: 11%;height: 38%;width: 17%">
            <div class='m-2'>
                <div class="m-2-1">
                    <div class="m-2-2">
                        <input type="text" style="height: 50px;" id="account" placeholder="请输入账号" />
                    </div>
                    <div class="m-2-2" style="position: relative;left:42.3%">
                        <P ><SPAN class="p_logo"></SPAN>
                            <input type="password" style="height: 50px;" id="passWord"  placeholder="请输入密码"/>
                        </P>
                    </div>
                </div>
                <div class='login_fields__submit' style="position: relative;top:53%;">
                    <input type='button' onclick="login()" value='登录'>
                </div>
            </div>
            <div class='success' id="success" style="position: relative;top:26%;left:22%">
                <h2>认证成功</h2>
            </div>
            <div class='error' id="error" style="position: relative;top:26%;left:22%">
                <h2>认证失败</h2>
            </div>

        </div>
        <div class='authent' style="position: fixed;bottom: 34%;height: 38%;width: 21%;">
            <img src='${base}/backstage/xu/img/puff.svg'>
            <p>认证中...</p>
        </div>
        <div class="m-5">
            <div id="m-5-id-1">
                <div id="m-5-2">
                    <div id="m-5-id-2">
                    </div>
                    <div id="m-5-id-3"></div>
                </div>
            </div>
        </div>
        <div class="m-10"></div>
        <div class="m-xz7"></div>
        <div class="m-xz8 xzleft"></div>
        <div class="m-xz9"></div>
        <div class="m-xz9-1"></div>
        <div class="m-x17 xzleft"></div>
        <div class="m-x18"></div>
        <div class="m-x19 xzleft"></div>
        <div class="m-x20"></div>
        <div class="m-8"></div>
        <div class="m-9"><div class="masked1" id="sx8">扫码点餐管理系统</div></div>
        <div class="m-11">
            <div class="m-k-1"><div class="t1"></div></div>
            <div class="m-k-2"><div class="t2"></div></div>
            <div class="m-k-3"><div class="t3"></div></div>
            <div class="m-k-4"><div class="t4"></div></div>
            <div class="m-k-5"><div class="t5"></div></div>
            <div class="m-k-6"><div class="t6"></div></div>
            <div class="m-k-7"><div class="t7"></div></div>
        </div>
        <div class="m-14"><div class="ss"></div></div>
        <div class="m-15-a">
            <div class="m-15-k">
                <div class="m-15xz1">
                    <div class="m-15-dd2"></div>
                </div>
            </div>
        </div>
        <div class="m-16"></div>
        <div class="m-17"></div>
        <div class="m-18 xzleft"></div>
        <div class="m-19"></div>
        <div class="m-20 xzleft"></div>
        <div class="m-21"></div>
        <div class="m-22"></div>
        <div class="m-23 xzleft"></div>
        <div class="m-24" id="localtime"></div>
    </div>
</div>
<script src="${base}/backstage/js/TweenLite.min.js"></script>
<script src="${base}/backstage/js/EasePack.min.js"></script>
<script src="${base}/backstage/js/rAF.js"></script>
<script src="${base}/backstage/js/demo-1.js"></script>
<script src="${base}/backstage/assets/js/common.min.js"></script>
<script type="text/javascript" src='${base}/backstage/xu/js/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src="${base}/backstage/xu/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${base}/backstage/xu/js/jquery-ui.min.js"></script>
<script>


    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table;
    })

    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {

        var _interval = window.setInterval(function () {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0) {
                window.clearInterval(_interval); // 停止轮询
                autofills.each(function() {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                });
            }
        }, 20);
    }

    function login() {
        if ($("#account").val() == "" || $("#account").val() == null) {
            layui.layer.msg("请正确输入账户", {icon: 5})
            return;
        }
        if ($("#passWord").val() == "" || $("#passWord").val() == null) {
            layui.layer.msg("请正确输入密码", {icon: 5})
            return;
        }
            $.ajax({
                type: "POST",
                url: "${base}/user/login",
                async: false,
                data: {
                    "account": $("#account").val(),
                    "passWord": $("#passWord").val()
                },
                success: function (data) {
                    if (data.code === 200) {
                        success(1);
                        setTimeout(function () {
                            window.location.href = "${base}/user/index.html"
                        },3800)
                    }else{
                        success(2);
                        setTimeout(function () {
                            alert("失败")
                        },3800)
                    }

                }
            });
    }


    //键盘事件
    $("body").bind("keydown",function(e){
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //回车执行查询
            $("#login").click();
        }
    });
</script>
<script>
    function success(code){
        $('.login').addClass('test');
        setTimeout(function () {
            $('.login').addClass('testtwo');
        }, 300);
        setTimeout(function () {
            $('.authent').show().animate({ right: -0 }, {
                easing: 'easeOutQuint',
                duration: 600,
                queue: false
            });
            $('.authent').animate({ opacity: 1 }, {
                duration: 200,
                queue: false
            }).addClass('visible');
        }, 500);
        setTimeout(function () {
            $('.authent').show().animate({ right: 90 }, {
                easing: 'easeOutQuint',
                duration: 600,
                queue: false
            });
            $('.authent').animate({ opacity: 0 }, {
                duration: 200,
                queue: false
            }).addClass('visible');
            $('.login').removeClass('testtwo');
        }, 3000);
        setTimeout(function () {
            $('.login').removeClass('test');
            $('.login div').fadeOut(123);
        }, 2800);
        setTimeout(function () {
            if(code==1){
                $('.success').fadeIn();
            }else{
                $('.error').fadeIn();
            }

        }, 3200);
        $('input[type="text"],input[type="password"]').focus(function () {
            $(this).prev().animate({ 'opacity': '1' }, 200);
        });
        $('input[type="text"],input[type="password"]').blur(function () {
            $(this).prev().animate({ 'opacity': '.5' }, 200);
        });
        $('input[type="text"],input[type="password"]').keyup(function () {
            if (!$(this).val() == '') {
                $(this).next().animate({
                    'opacity': '1',
                    'right': '30'
                }, 200);
            } else {
                $(this).next().animate({
                    'opacity': '0',
                    'right': '20'
                }, 200);
            }
        });
        var open = 0;
        $('.tab').click(function () {
            $(this).fadeOut(200, function () {
                $(this).parent().animate({ 'left': '0' });
            });
        });
    }




</script>

</body>
</html>